* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #111;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ring {
position: relative;
width: 150px;
height: 150px;
margin: -30px;
border-radius: 50%;
border-left: 4px solid #1bc9f5;
border-top: 4px solid #1bc9f5;
animation: animate 4s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ring:nth-child(2) {
animation: animate2 4s linear infinite;
animation-delay: -1s;
border-top: 4px solid #37eb26;
border-left: 4px solid #37eb26;
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.ring:nth-child(3) {
animation: animate3 4s linear infinite;
animation-delay: -3s;
position: absolute;
top: -66.66px;
border-top: 4px solid #e41db9;
border-left: 4px solid #e41db9;
}
@keyframes animate3 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}